<template>
  <input type="text" v-model="queryName">
<table>
  <tr>
    <th>name</th>
    <th>price</th>
  </tr>
  <tr v-for="(item,index) in newList":key="index" :style="item.price > 60 ? 'background-color: orange' : '' ">
    <td>{{item.name}}</td>
    <td>{{item.price}}</td>
    <td>
      <button @click="updateitem(index)">修改</button>
      <button @click="delectitem(index)">删除</button>
    </td>
  </tr>
</table>
</template>

<script lang="ts" setup>
import {computed, ref} from "vue";

let goods=ref([
  {"name":"python入门","price":50},
  {"name":"python进阶","price":100},
  {"name":"python高级","price":75},
  {"name":"python研究","price":55},
  {"name":"python教育","price":110},
])

let newList = ref(goods.value)
let queryName = ref("")

newList = computed(() => {
  return goods.value.filter((item:any) => {
    return item.name.includes(queryName.value)
  })
})

function updateitem(index:number){
    const newname =prompt("请输入你修改后的name")||goods.value[index].name
    const newprice =prompt("价格")||goods.value[index].price
    goods.value[index].name=newname
    goods.value[index].price=Number(newprice)
}
function delectitem(index:number){
  goods.value.splice(index,1)
}
</script>


<style>

</style>
